import React, { PureComponent } from "react"
import ReactDom from 'react-dom'
import Styles from '@/scss/froms.scss'
import { Menu, Dropdown } from 'antd';
import IconStyles from "@/icon/font_icon1/iconfont.css"
import CONSTS from "@/inits/consts"
import {
  SmallDashOutlined,
  DeleteOutlined,
} from '@ant-design/icons';
//from的下拉列表
class ComDropDown extends PureComponent<any, any>{

  //点击收藏按钮效果
  handleCollect = (id: string) => {
    let icon = ReactDom.findDOMNode(document.getElementById('collect')) as HTMLElement;
    this.props.getCollectByID(id) ? icon.className = IconStyles.iconfont + " " + IconStyles.icon_shoucang : icon.className = IconStyles.iconfont + " " + IconStyles.icon_shoucang1
    this.props.handleCollect(this.props.todo.id, CONSTS.ISSHOW.COLLECT)
    //  this.props.changeVisible()  此处可以调用显示隐藏函数
  }
  //下拉列表内容
  menu = (
    <Menu>
      <Menu.Item onClick={() => { this.props.handleMoveRecyle(this.props.todo.id, CONSTS.STATE.DELETE) }}>
        <DeleteOutlined /> 移至回收站
      </Menu.Item>
      <Menu.Item className={Styles.dropI} onClick={() => { this.handleCollect(this.props.todo.id) }}>
        <i id={"collect"} className={this.props.todo.collect ? `${IconStyles.iconfont} ${IconStyles.icon_shoucang1}` : `${IconStyles.iconfont} ${IconStyles.icon_shoucang}`}   ></i>  <span  > 收藏</span>
      </Menu.Item>
    </Menu>
  );


  render() {
    console.log()

    return (
      <div  >
        <Dropdown overlay={this.menu} placement="bottomRight" arrow >
          <SmallDashOutlined />
        </Dropdown>
      </div>
    )
  }
}



export default ComDropDown